<template>
  <view class="page bg-white">
    <view class="main">
      <u-text color="#333" size="32rpx" text="修改就读学校" bold></u-text>
      <view class="school-box">
        <u-input fontSize="32rpx" v-model="school" size="32rpx" placeholder="请输入就读学校"></u-input>
      </view>
      <u-text margin="20rpx 0 0 0" color="#333" size="32rpx" text="就读年级" bold></u-text>
      <view class="grade-box">
        <u-input fontSize="32rpx" v-model="grade" size="32rpx" placeholder="请输入就读年级"></u-input>
      </view>
      <u-text margin="20rpx 0 0 0" color="#333" size="32rpx" text="就读班级" bold></u-text>
      <view class="class-box">
        <u-input fontSize="32rpx" v-model="className" size="32rpx" placeholder="请输入就读班级"></u-input>
      </view>
    </view>
    <view class="footer" :style="{ boxShadow: '0rpx -4rpx 36rpx 0rpx ' + themeTertiary }">
      <u-button shape="circle" size="large" :color="themePrimary" text="保存"></u-button>
    </view>
  </view>
</template>
<script setup>
import { ref } from 'vue'
import { useTheme } from '/composables/useTheme'

const { themePrimary, themeSecondary, themeTertiary } = useTheme();

const school = ref('')
const grade = ref('')
const className = ref('')

</script>
<style scoped lang="scss">
.school-box,
.grade-box,
.class-box {
  margin-top: 20rpx;
}
</style>